<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'plugins.donate.tile_donate_to' | translate: { author: '@' + plugin.author } }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body">
    <div class="text-center pink-text mb-3">
      <i class="fas fa-heart" style="font-size: 75px"></i>
    </div>
    <ul class="mb-3">
      <li>{{ 'plugins.donate.message_1' | translate }}</li>
      <li>{{ 'plugins.donate.message_2' | translate }}</li>
    </ul>
    <ul class="list-group list-group-box">
      @for (option of fundingOptions; track option) {
      <li class="list-group-item">
        <i [ngClass]="getIconClass(option.type)" class="me-2 primary-text fa-xl"></i>
        <a [href]="option.url" target="_blank" rel="noopener noreferrer" class="text-break-all">{{ option.url }}</a>
      </li>
      }
    </ul>
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start"></div>
    <div class="text-center">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-end"></div>
  </div>
</div>
